<template>
  <div id="addChoice">
    <div class="jx-content">
      <div class="answer-editor">
        <h2 class="jx-title">试题题目</h2>
        <mavonEditor ref="answer"></mavonEditor>
      </div>
      <div class="question-editor">
        <h2 class="jx-title">
          试题选项
          <span>正确答案</span>
        </h2>
        <div class="question-choice" v-for="(item,index) in arrChoice" :key="item">
          <div class="question-left">{{ arrChoiceMap[index] }}</div>
          <mavonEditor class="question-center" :ref="item"></mavonEditor>
          <div class="question-right">
            <el-button class="question-del" @click="delChoice(index)" :disabled="delChoiceDiabled">-</el-button>
            <label class="question-label">
              <span class="chose-del">{{ arrChoiceMap[index] }}</span>
              <el-checkbox v-model="addForm.answer[index].isCorrect" class="question-right2"></el-checkbox>
            </label>
          </div>
        </div>
        <el-button @click="addChoiceItem" class="choice-add" :disabled="addChoiceDiabled">+</el-button>
      </div>
      <div class="btn-group">
        <button @click="addQuestion" class="button-style question-submit">保存</button>
      </div>
    </div>
  </div>
</template>
<script>
import mavonEditor from "../../../components/mavonEditor";
import $ from "jquery";
import axios from "axios";
export default {
  components: { mavonEditor },
  data() {
    return {
      addForm: {
        //章节ID
        chapterId: '',
        //试题类型
        questionType: 1,
        //问题描述，题干
        content: "",
        //备选答案
        answer: []
        //查重百分比
        //duplicatePercent:50
      },
      check: [],
      nChoice: 4,
      arrChoice: [],
      arrChoiceMap: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],
      answerRenders: "",
      addChoiceDiabled: false,
      delChoiceDiabled: false
    };
  },
  created() {
    //监听改变赋值
    let that = this;
    that.$root.$on("chapter-id", function(id) {
      that.addForm.chapterId = id;
    });
  },
  computed: {},
  watch: {
    arrChoice(val) {
      console.log(val, 123123);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      //设置问题toolbar
      //this.setToolbars("answer");
      this.setChoiceNum();
      this.setAddFormAnswer();
    },
    //初始化answer
    setAddFormAnswer() {
      let that = this;
      let arr = [];
      $.each(that.arrChoice, function(i, d) {
        let obj = {
          content: "",
          isCorrect: false
        };
        arr.push(obj);
      });
      that.addForm.answer = arr;
    },
    setChoiceNum() {
      let nChoice = this.nChoice;
      let arrChoice = this.arrChoice;
      let arrChoiceMap = this.arrChoiceMap;
      for (let i = 0; i < nChoice; i++) {
        arrChoice.push(arrChoiceMap[i]);
      }
      console.log(arrChoice, 789);
    },

    //设置问题toolbar
    // setToolbars(ref) {
    //   //console.log(ref);
    //   this.$refs[ref].toolbars = this.toolbars;
    // },
    //设置选项toolbar
    // setToolbarsChoice(ref) {
    //   var that = this;
    //   //同步，替代setTimeout
    //   this.$nextTick(function() {
    //     console.log(that.$refs[ref]);
    //     that.$refs[ref][0].toolbars = that.toolbars;
    //   });
    //   // setTimeout(function() {

    //   // }, 100);
    // },
    //锁定添加按钮
    disabledChoice() {
      if (this.arrChoice.length === 2) {
        this.delChoiceDiabled = true;
      } else {
        this.delChoiceDiabled = false;
      }
      if (this.arrChoice.length === this.arrChoiceMap.length) {
        this.addChoiceDiabled = true;
      } else {
        this.addChoiceDiabled = false;
      }
    },

    //删除选项
    delChoice(index) {
      console.log(index, 1234);
      this.arrChoice.splice(index, 1);
      this.disabledChoice();
    },
    //添加选项
    addChoiceItem() {
      var that = this;
      let choice = that.mergeArray(that.arrChoiceMap, that.arrChoice);
      that.arrChoice.push(choice);
      that.disabledChoice();
      that.setAddFormAnswer();
      //console.log(arrChoice);
    },
    //两数组相减，保留余下第一个元素
    mergeArray(aArr, bArr) {
      if (bArr.length == 0) {
        return aArr;
      }
      var diff = [];
      var str = bArr.join("&quot;&quot;");
      for (var e in aArr) {
        if (str.indexOf(aArr[e]) == -1) {
          diff.push(aArr[e]);
        }
      }
      return diff[0];
    },
    //添加试题
    addQuestion() {
      var that = this;
      //添加问题html
      let renders = that.$refs.answer.renders;
      that.addForm.content = renders;
      //添加选项html
      let arr = [];
      let answer = that.addForm.answer;
      let arrChoice = that.arrChoice;
      $.each(arrChoice,function(i,d){
        let renders = that.$refs[d][0].renders;
        answer[i].content = renders;
      });

      axios
        .post(
          "/tes/course/1/businessType/1/question-repository/question",
          that.addForm
        )
        .then(function(res) {
          console.log("成功1");
          console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              that.$message({
                message: "添加成功",
                type: "success"
              });
            } else {
              that.$message({
                message: res.data.message,
                type: "error"
              });
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    }
  }
};
</script>
<style lang="scss">
@import "./../../../styles/layout/color_variables";
//编辑器设置z-index
@for $i from 1 through 15 {
  //$item: nth($stars, $i);
  .question-choice {
    &:nth-child(#{$i}) {
      .v-note-wrapper.markdown-body {
        position: relative;
        z-index: 16-$i;
      }
    }
  }
}

body {
  background: $bg-gray;
  overflow-y: scroll;
}
#addChoice {
  width: $width;
  margin: 20px auto;
  color: #727272;

  //添加选项
  .choice-add {
    width: 950px;
    margin: 0 0 46px 28px;
    height: 46px;
    line-height: 26px;
    font-size: 42px;
    text-align: center;
    cursor: pointer;
    color: $title-gray;
    border: 1px solid $border-gray;
    &:hover {
      border: 1px solid #1277eb;
      color: #1277eb;
    }
  }
  .choice-add.is-disabled {
    &:hover {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
    }
  }
  //保存提交
  .question-submit {
    margin-left: -111px;
  }
  //编辑器
  .v-note-wrapper {
    min-height: 120px;
  }
  .form-group {
  }
  .btn-group {
    text-align: center;
  }
  .answer-editor {
    margin-bottom: 60px;
    .v-note-wrapper {
      min-height: 150px;
    }
  }
  .question-editor {
    .jx-title {
      display: flex;
      justify-content: space-between;
    }
  }
  .question-choice {
    display: flex;
    margin-bottom: 40px;
    .question-left {
      color: #727272;
      min-width: 30px;
    }
    .question-center {
      width: 100%;
    }
    .question-right {
      min-width: 140px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .question-del {
        width: 20px;
        height: 20px;
        padding: 0;
        font-size: 24px;
        border-radius: 20px;
        color: $title-gray;
        border: 1px solid $title-gray;
        text-align: center;
        line-height: 6px;
        cursor: pointer;
        &:hover {
          color: #1277eb;
          border: 1px solid #1277eb;
        }
      }
      .question-del.is-disabled {
        &:hover {
          color: #c0c4cc;
          cursor: not-allowed;
          background-image: none;
          background-color: #fff;
          border-color: #ebeef5;
        }
      }
      .question-label {
        .chose-del {
          color: #727272;
          margin-right: 10px;
          vertical-align: middle;
        }
      }
    }
  }
}
</style>
